<template>
  <!-- api日志-->
  <div>
    <div class="row-header">
      <el-form ref="searchForm" :model="searchForm" label-width="50px" :inline="true" >
        <el-form-item label=" " prop="cardNumber">
          <el-input size="small" v-model.trim="searchForm.cardNumber" placeholder="请输入卡号" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="customerOrderId">
          <el-input size="small" v-model.trim="searchForm.customerOrderId" placeholder="请输入订单ID" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="nickName">
          <el-input size="small" v-model="searchForm.nickName" placeholder="请输入用户昵称" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="dictStatus">
          <el-select v-model="searchForm.dictStatus" placeholder="请选择状态" style="width: 300px;">
            <el-option
              key=""
              label="请选择"
              value="">
            </el-option>
            <el-option
              key="REFUND_SUCCESS"
              label="退款成功"
              value="REFUND_SUCCESS">
            </el-option>
            <el-option
              key="REFUNDING"
              label="退款进行中"
              value="REFUNDING">
            </el-option>
            <el-option
              key="REFUND_FAIL"
              label="退款失败"
              value="REFUND_FAIL">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="mini" icon="el-icon-search" @click="beforeinitData">查询</el-button>
        <el-button type="shenda" size="mini" icon="el-icon-refresh-right" @click="resetForm('searchForm')">重置</el-button>
      </div>
    </div>
    <div class="sd-page-line"></div>
    <div class="row-main">
      <el-button type="shenda" size="mini" @click="initData" icon="el-icon-refresh">刷新数据</el-button>
<!--      <el-button type="shenda" size="mini"   icon="el-icon-download" @click="$refs.mainDataTable.exportData()">导出当前页</el-button>-->
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" class="row-main-table" ref="mainDataTable"
                 v-loading.fullscreen="mainTableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column prop="customerOrderId" label="用户订单" align="center"></el-table-column>
        <el-table-column prop="cardNumber" label="卡号" align="center"></el-table-column>
        <el-table-column prop="beforeRefund" label="退款前价格" align="center"></el-table-column>
        <el-table-column prop="refund" label="退款价格" align="center"></el-table-column>
        <el-table-column prop="afterRefund" label="退款后价格" align="center"></el-table-column>
        <el-table-column prop="wxrefundId" label="微信回调的退款ID" align="center"></el-table-column>
        <el-table-column prop="nickName" label="用户昵称" align="center"></el-table-column>
        <el-table-column prop="proportion" label="订单退款比例" align="center"></el-table-column>
        <el-table-column prop="backUserProportion" label="返佣退款比例" align="center"></el-table-column>
        <el-table-column prop="dictStatusName" label="状态" align="center"></el-table-column>
        <el-table-column prop="insertTimeTime" label="退款时间" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center" width="150px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="left">
              <span style="width: 100px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">{{scope.row.remark}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="失败原因" align="center" width="150px">
          <template slot-scope="scope">
            <span v-if="scope.row.dictStatus=='REFUND_FAIL'">{{scope.row.wxbackJson}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>
  </div>

</template>
<script>
  import {refundList} from '@/api/getData'
  // export const t_customer_refundList = (data, loadingObj) => fetch('//customer-refund/list', data, loadingObj, '-system')
  export default {
    name: "oemTransOrder",
    data() {
      return {
        loading: false,
        mainTableLoading: false,
        tableData: [],
        searchForm: {
          nickName: null,
          customerOrderId: null,
          cardNumber:null,
          dictStatus:null
        },
        page: {
          current: 1,
          size: 10,
          total: 0
        }
      }
    },
    async mounted() {
      let searchObj = sessionStorage.getItem(this.$route.path);
      if(searchObj!==undefined&&searchObj!==null&&searchObj!==''){
        let o = JSON.parse(searchObj);
        this.page = o.page;
        this.searchForm = {};
        let form = {};
        for(let i in o){
          if(i!=='page'){
            form[i]=o[i]
          }
        }
        this.searchForm = {...form}
      }
      await this.initData()
    },
    methods: {
      beforeinitData(){
      this.page.current = 1
      this.initData()
    },
      initData() {
        this.mainTableLoading = true;
        this.searchForm.page = this.page;
        sessionStorage.setItem(this.$route.path, JSON.stringify(this.searchForm))

        refundList(this.searchForm).then(response => {
          this.tableData = response.data.records
          this.page.total = response.data.total
          this.mainTableLoading = false
        }).catch(e => {
          this.mainTableLoading = false
        })
      },
      handleSizeChange(val){
        this.page.size = val;
        this.current = 1;
        this.initData();
      },
      handleCurrentChange(val){
        this.page.current = val;
        this.initData();
      },
      resetForm(formName) {
        sessionStorage.removeItem(this.$route.path);
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>

</style>
